<template>
  <div class="thematic-config">
    <!-- <div class="config-header">
      <h3>专题图配置</h3>
    </div> -->
    
    <div class="config-content">
      <!-- 数据源选择 -->
      <div class="config-section">
        <h4>📊 数据源</h4>
        <select v-model="config.dataSource" @change="updateConfig">
          <option value="cityPopulation">城市人口</option>
          <option value="provinceGDP">省份GDP</option>
          <option value="airQuality">空气质量</option>
          <option value="temperatureData">温度分布</option>
          <option value="trafficFlow">交通流量</option>
          <option value="windWaveCurrent">风浪流专题图</option>
        </select>
      </div>

      <!-- 风浪流专题图配置 -->
      <div v-if="config.dataSource === 'windWaveCurrent'" class="config-section">
        <h4>🌊 风浪流配置</h4>
        
        <!-- 日期选择 -->
        <div class="date-input">
          <label>日期时间：</label>
          <input 
            type="text" 
            v-model="config.dateShumo" 
            placeholder="2025062609"
            @input="updateConfig"
            class="date-input-field"
          >
        </div>

        <!-- 图层选择 -->
        <div class="layer-selection">
          <h5>选择图层：</h5>
          <div class="layer-options">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.layers.wind" 
                @change="updateConfig"
              >
              风场
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.layers.wave" 
                @change="updateConfig"
              >
              海浪
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.layers.current" 
                @change="updateConfig"
              >
              海流
            </label>
          </div>
        </div>

        <!-- 显示模式 -->
        <div class="display-mode">
          <h5>显示模式：</h5>
          <div class="mode-options">
            <label class="radio-label">
              <input 
                type="radio" 
                v-model="config.displayMode" 
                value="single"
                @change="updateConfig"
              >
              单一图层
            </label>
            <label class="radio-label">
              <input 
                type="radio" 
                v-model="config.displayMode" 
                value="overlay"
                @change="updateConfig"
              >
              叠加显示
            </label>
          </div>
        </div>

        <!-- 风场配置 -->
        <div v-if="config.layers.wind" class="wind-config">
          <h5>风场配置：</h5>
          <div class="wind-options">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.windOptions.showArrow" 
                @change="updateConfig"
              >
              显示箭头
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.windOptions.showParticle" 
                @change="updateConfig"
              >
              显示粒子
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.windOptions.showFeather" 
                @change="updateConfig"
              >
              显示风羽
            </label>
          </div>
        </div>

        <!-- 海浪配置 -->
        <div v-if="config.layers.wave" class="wave-config">
          <h5>海浪配置：</h5>
          <div class="wave-options">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.waveOptions.showArrow" 
                @change="updateConfig"
              >
              显示方向
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.waveOptions.showParticle" 
                @change="updateConfig"
              >
              显示粒子
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.waveOptions.showLabel" 
                @change="updateConfig"
              >
              显示标签
            </label>
          </div>
        </div>

        <!-- 海流配置 -->
        <div v-if="config.layers.current" class="current-config">
          <h5>海流配置：</h5>
          <div class="current-options">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.currentOptions.showArrow" 
                @change="updateConfig"
              >
              显示箭头
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.currentOptions.showParticle" 
                @change="updateConfig"
              >
              显示粒子
            </label>
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                v-model="config.currentOptions.showLand" 
                @change="updateConfig"
              >
              显示数值
            </label>
          </div>
        </div>
      </div>

      <!-- 专题图类型 -->
      <div class="config-section">
        <h4>🗺️ 图表类型</h4>
        <div class="type-grid">
          <div 
            v-for="type in mapConfigs.thematicTypes" 
            :key="type.value"
            class="type-card"
            :class="{ active: config.thematicType === type.value }"
            @click="selectType(type.value)"
          >
            <span class="type-icon">{{ type.icon }}</span>
            <span class="type-label">{{ type.label }}</span>
          </div>
        </div>
      </div>

      <!-- 颜色方案 -->
      <div class="config-section">
        <h4>🎨 颜色方案</h4>
        <div class="color-schemes">
          <div 
            v-for="scheme in mapConfigs.colorSchemes"
            :key="scheme.value"
            class="color-scheme"
            :class="{ active: config.colorScheme === scheme.value }"
            @click="selectColorScheme(scheme.value)"
          >
            <div class="color-preview">
              <div 
                v-for="color in scheme.colors.slice(0, 4)" 
                :key="color"
                class="color-dot"
                :style="{ backgroundColor: color }"
              ></div>
            </div>
            <span class="scheme-name">{{ scheme.name }}</span>
          </div>
        </div>
      </div>

      <!-- 显示选项 -->
      <div class="config-section">
        <h4>⚙️ 显示选项</h4>
        <div class="option-group">
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              v-model="config.showGrid" 
              @change="updateConfig"
            >
            显示经纬网
          </label>
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              v-model="config.showScale" 
              @change="updateConfig"
            >
            显示比例尺
          </label>
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              v-model="config.showLegend" 
              @change="updateConfig"
            >
            显示图例
          </label>
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              v-model="config.showLabels" 
              @change="updateConfig"
            >
            显示标签
          </label>
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              v-model="config.showNorthArrow" 
              @change="updateConfig"
            >
            显示指北针
          </label>
        </div>
      </div>

      <!-- 透明度 -->
      <div class="config-section">
        <h4>🔍 透明度</h4>
        <input 
          type="range" 
          min="0" 
          max="1" 
          step="0.1" 
          v-model="config.opacity"
          @input="updateConfig"
          class="opacity-slider"
        >
        <span class="opacity-value">{{ Math.round(config.opacity * 100) }}%</span>
      </div>

      <!-- 操作按钮 -->
      <div class="config-actions">
        <button @click="generateMap" class="btn-primary">
          生成专题图
        </button>
        <button @click="resetConfig" class="btn-secondary">
          重置配置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { mapConfigs, defaultMapConfig } from '@/data/sampleData.js';

const emit = defineEmits(['config-change', 'generate-map']);

const config = reactive({
  dataSource: 'cityPopulation',
  thematicType: 'point',
  colorScheme: 'blue',
  showGrid: true,
  showScale: true,
  showLegend: true,
  showLabels: true,
  showNorthArrow: true,
  opacity: 0.8,
  // 风浪流专题图配置
  dateShumo: '2025062609',
  layers: {
    wind: true,
    wave: false,
    current: false
  },
  displayMode: 'single', // 'single' | 'overlay'
  windOptions: {
    showArrow: true,
    showParticle: false,
    showFeather: false
  },
  waveOptions: {
    showArrow: false,
    showParticle: true,
    showLabel: false
  },
  currentOptions: {
    showArrow: true,
    showParticle: true,
    showLand: true
  }
});

const selectType = (type) => {
  config.thematicType = type;
  updateConfig();
};

const selectColorScheme = (scheme) => {
  config.colorScheme = scheme;
  updateConfig();
};

const updateConfig = () => {
  emit('config-change', { ...config });
};

const generateMap = () => {
  emit('generate-map', { ...config });
};

const resetConfig = () => {
  Object.assign(config, {
    dataSource: 'cityPopulation',
    thematicType: 'point',
    colorScheme: 'blue',
    showGrid: true,
    showScale: true,
    showLegend: true,
    showLabels: true,
    showNorthArrow: true,
    opacity: 0.8,
    // 风浪流专题图配置
    dateShumo: '2025062609',
    layers: {
      wind: true,
      wave: false,
      current: false
    },
    displayMode: 'single',
    windOptions: {
      showArrow: true,
      showParticle: false,
      showFeather: false
    },
    waveOptions: {
      showArrow: false,
      showParticle: true,
      showLabel: false
    },
    currentOptions: {
      showArrow: true,
      showParticle: true,
      showLand: true
    }
  });
  updateConfig();
};

// 初始化时发送配置
onMounted(() => {
  updateConfig();
});
</script>

<style scoped>
.thematic-config {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  overflow-y: auto;
}

.config-header {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.config-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.config-content {
  flex: 1;
  padding: 20px;
}

.config-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.config-section:last-child {
  border-bottom: none;
}

.config-section h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.config-section select {
  width: 100%;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  transition: border-color 0.3s ease;
}

.config-section select:focus {
  outline: none;
  border-color: #667eea;
}

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.type-card {
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.type-card:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.type-card.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.type-icon {
  display: block;
  font-size: 20px;
  margin-bottom: 5px;
}

.type-label {
  font-size: 12px;
  font-weight: 500;
}

.color-schemes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-scheme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.color-scheme:hover {
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.color-scheme.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.color-preview {
  display: flex;
  gap: 4px;
}

.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.scheme-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  color: #333;
  user-select: none;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  accent-color: #667eea;
}

.opacity-slider {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  outline: none;
  -webkit-appearance: none;
  margin-bottom: 8px;
}

.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.opacity-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #667eea;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.opacity-value {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
  user-select: none;
}

.config-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-1px);
}

/* 风浪流配置样式 */
.date-input {
  margin-bottom: 15px;
}

.date-input label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.date-input-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.date-input-field:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.layer-selection,
.display-mode,
.wind-config,
.wave-config,
.current-config {
  margin-bottom: 15px;
}

.layer-selection h5,
.display-mode h5,
.wind-config h5,
.wave-config h5,
.current-config h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.layer-options,
.mode-options,
.wind-options,
.wave-options,
.current-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  margin: 0;
}

.wind-config,
.wave-config,
.current-config {
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #4a90e2;
}

.wind-config {
  border-left-color: #ff6b6b;
}

.wave-config {
  border-left-color: #4ecdc4;
}

.current-config {
  border-left-color: #45b7d1;
}
</style> 